<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市联动</title>
    <style>

    </style>
</head>
<body>
    <select name="" id="province">
        <!-- shift+alt+下键：复制上一行 -->
        <option value="">省份</option>
        <option value="gd">广东</option>
        <option value="gx">广西</option>
        <option value="hn">湖南</option>
    </select>
    <select name="" id="city">
        <!-- shift+alt+下键：复制上一行 -->
        <option value="">城市</option>
        <!-- <option value="">广州</option>
        <option value="">佛山</option>
        <option value="">珠海</option>
        <option value="">东莞</option> -->
    </select>
</body>
<script>
    /*
        二级联动效果：
            * 选择省，就控制城市的生成
            * 当内容发生改变事件：onchange
    
    */

    var province = document.getElementById('province');
    var city = document.getElementById('city');

    province.onchange = function() {
        //当内容变化，执行这里的代码
        // console.log(666);
        var result = province.value;//获取里面当前的那个值
        console.log(result);

        //选择了广东省，就生成广东的城市数据
        if(result == 'gd') {
            //选了广东：生成广东城市，赋值到city节点里面
            var str = ` <option value="">城市</option>
                        <option value="">广州</option>
                        <option value="">佛山</option>
                        <option value="">珠海</option>
                        <option value="">东莞</option>`;
            console.log(str);
            city.innerHTML = str;//生成节点内容：渲染
        }

        //选择了广西，就生成广西的城市数据
        if(result == 'gx') {
            var str = ` <option value="">城市</option>
                        <option value="">南宁</option>
                        <option value="">桂林</option>
                        <option value="">防城港</option>
                        <option value="">柳州</option>
                        <option value="">百色</option>`;
            console.log(str);
            city.innerHTML = str;
        }
    }



</script>
</html>